<!--
 * @Author: LENOVO\zhangch17 zhangch17@Lenovo.com
 * @Date: 2022-11-14 23:09:06
 * @LastEditors: LENOVO\zhangch17 zhangch17@Lenovo.com
 * @LastEditTime: 2022-11-19 21:40:49
 * @FilePath: \todolist\src\views\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="detail-main">
    <div>
      <el-row>
        <h1>
          <el-col :span='6'>👁‍🗨{{detail.title}}</el-col>
        </h1>
        <h1>
          <el-col :span='16'>优先级：{{detail.level}}</el-col>
        </h1>
      </el-row>
      <el-row>

        <h1>
          <el-col :span='8'>当前状态：{{currentState[detail.state]}}</el-col>
        </h1>
        <h1>
          <el-col :span='10'><span style="color:red">{{timeLeft(detail)}}</span></el-col>
        </h1>
      </el-row>
      <el-row>
        <el-col :span='10'>
          <h2>问题描述：{{detail.describe}}</h2>
        </el-col>
      </el-row>
    </div>

    <div class="image">
      <img
        v-for="(item,index) in imageList"
        :key='index'
        :src="item"
        alt="🈚"
      />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      logo: {
      },
      currentState: {
        'todo': '待处理',
        'pending': '处理中',
        'done': '已完成'
      },
      detail: {},
      showImage: false,
      imageList: []
    }
  },
  methods: {
    init (data) {
      this.detail = data
      this.imageList = []
      this.imageList = data.image.length && data.image.map(item => {
        return 'data:image/png;base64' + item
      })
    },
    timeLeft (detail) {
      let a = new Date(detail.deadline + ' ' + detail.time)
      let b = new Date()
      return this.formatTime(a - b, detail.state)
    },
    formatTime (msTime, state) {
      if (isNaN(msTime)) return ""
      if (msTime < 0 && state === 'done') {
        return 'congratulations！🎉'
      } else if (msTime < 0 && state !== 'done') {
        return "过期了，祝你下次做好"
      }
      let time = msTime / 1000;
      let day = Math.floor(time / 60 / 60 / 24);
      let hour = Math.floor(time / 60 / 60) % 24;
      let minute = Math.floor(time / 60) % 60;
      let second = Math.floor(time) % 60;
      return `剩余时间：${day}天${hour}时${minute}分${second}秒`
    }

  }
}
</script>

<style lang='scss' scoped>
.detail-main{
  width: 80%;
  margin-left: 10%;
  margin-top: 30px;
  box-shadow: 10px 10px 20px 10px #EBEEF5;
}
</style>